<!DOCTYPE html>
<!-- saved from url=(0027)http://jssdk.demo.qiniu.io/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>七牛云存储 - JavaScript SDK</title>
    <link href="http://jssdk.demo.qiniu.io/images/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="./bootstrap.css">
    <link rel="stylesheet" href="./main.css">
    <link rel="stylesheet" href="./highlight.css">

    <!--[if lt IE 9]>
      <script src="bower_components/respond/dest/respond.min.js"></script>
    <![endif]-->
<style type="text/css" adt="123"></style><script>if(!document.URL.match(/^http:\/\/v\.baidu\.com|http:\/\/music\.baidu\.com|http:\/\/dnf\.duowan\.com|http:\/\/bbs\.duowan\.com|http:\/\/newgame\.duowan\.com|http:\/\/my\.tv\.sohu\.com/)){
    (function() {
        function A() {}
        A.prototype = {
            rules: {
                /*'youku_loader': {
                 'find': /^http:\/\/static\.youku\.com\/.*(loader|player_.*)(_taobao)?\.swf/,
                 'replace': 'http://swf.adtchrome.com/loader.swf'
                 },
                 'youku_out': {
                 'find': /^http:\/\/player\.youku\.com\/player\.php\/.*sid\/(.*)/,
                 'replace': 'http://swf.adtchrome.com/loader.swf?VideoIDS=$1'
                 },*/
                'pps_pps': {
                    'find': /^http:\/\/www\.iqiyi\.com\/player\/cupid\/common\/pps_flvplay_s\.swf/,
                    'replace': 'http://swf.adtchrome.com/pps_20140420.swf'
                },
                /*'iqiyi_1': {
                 'find': /^http:\/\/www\.iqiyi\.com\/player\/cupid\/common\/.+\.swf$/,
                 'replace': 'http://swf.adtchrome.com/iqiyi_20140624.swf'
                 },
                 'iqiyi_2': {
                 'find': /^http:\/\/www\.iqiyi\.com\/common\/flashplayer\/\d+\/.+\.swf$/,
                 'replace': 'http://swf.adtchrome.com/iqiyi_20140624.swf'
                 },*/
                'ku6': {
                    'find': /^http:\/\/player\.ku6cdn\.com\/default\/.*\/\d+\/(v|player|loader)\.swf/,
                    'replace': 'http://swf.adtchrome.com/ku6_20140420.swf'
                },
                'ku6_topic': {
                    'find': /^http:\/\/player\.ku6\.com\/inside\/(.*)\/v\.swf/,
                    'replace': 'http://swf.adtchrome.com/ku6_20140420.swf?vid=$1'
                },
                /*'sohu': {
                    'find': /^http:\/\/tv\.sohu\.com\/upload\/swf(\/p2p)?\/\d+\/Main\.swf/,
                    'replace': 'http://www.adtchrome.com/sohu/sohu_20150104.swf'
                },
                'sohu2':{
                    'find':/^http:\/\/[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\/testplayer\/Main0?\.swf/,
                    'replace':'http://www.adtchrome.com/sohu/sohu_20150104.swf'
                },
                'sohu_share': {
                    'find': /^http:\/\/share\.vrs\.sohu\.com\/my\/v\.swf&/,
                    'replace': 'http://www.adtchrome.com/sohu/sohu_20150104.swf?'
                },
                'sohu_sogou' : {
                    'find': /^http:\/\/share\.vrs\.sohu\.com\/(\d+)\/v\.swf/,
                    'replace': 'http://www.adtchrome.com/sohu/sohu_20150104.swf?vid=$1'
                },
                'letv': {
                 'find': /^http:\/\/player\.letvcdn\.com\/.*p\/.*\/newplayer\/LetvPlayer\.swf/,
                 'replace': 'http://swf.adtchrome.com/20150110_letv.swf'
                 },
                 'letv_topic': {
                 'find': /^http:\/\/player\.hz\.letv\.com\/hzplayer\.swf\/v_list=zhuanti/,
                 'replace': 'http://swf.adtchrome.com/20150110_letv.swf'
                 },
                 'letv_duowan': {
                 'find': /^http:\/\/assets\.dwstatic\.com\/video\/vpp\.swf/,
                 'replace': 'http://yuntv.letv.com/bcloud.swf'
                 },*/
                '17173_in':{
                    'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFile(Customer)?\.swf/,
                    'replace':"http://swf.adtchrome.com/17173_in_20150522.swf"
                },
                '17173_out':{
                    'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFileFirstpage\.swf/,
                    'replace':"http://swf.adtchrome.com/17173_out_20150522.swf"
                },
                '17173_live':{
                    'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream(_firstpage)?\.swf/,
                    'replace':"http://swf.adtchrome.com/17173_stream_20150522.swf"
                },
                '17173_live_out':{
                    'find':/http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream_(custom)?Out\.swf/,
                    'replace':"http://swf.adtchrome.com/17173.out.Live.swf"
                }
            },
            _done: null,
            get done() {
                if(!this._done) {
                    this._done = new Array();
                }
                return this._done;
            },
            addAnimations: function() {
                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = 'object,embed{\
                -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted;\
                -ms-animation-duration:.001s;-ms-animation-name:playerInserted;\
                -o-animation-duration:.001s;-o-animation-name:playerInserted;\
                animation-duration:.001s;animation-name:playerInserted;}\
                @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}';
                document.getElementsByTagName('head')[0].appendChild(style);
            },
            animationsHandler: function(e) {
                if(e.animationName === 'playerInserted') {
                    this.replace(e.target);
                }
            },
            replace: function(elem) {
                if(this.done.indexOf(elem) != -1) return;
                this.done.push(elem);
                var player = elem.data || elem.src;
                if(!player) return;
                var i, find, replace = false;
                for(i in this.rules) {
                    find = this.rules[i]['find'];
                    if(find.test(player)) {
                        replace = this.rules[i]['replace'];
                        if('function' === typeof this.rules[i]['preHandle']) {
                            this.rules[i]['preHandle'].bind(this, elem, find, replace, player)();
                        }else{
                            this.reallyReplace.bind(this, elem, find, replace)();
                        }
                        break;
                    }
                }
            },
            reallyReplace: function(elem, find, replace) {
                elem.data && (elem.data = elem.data.replace(find, replace)) || elem.src && ((elem.src = elem.src.replace(find, replace)) && (elem.style.display = 'block'));
                var b = elem.querySelector("param[name='movie']");
                this.reloadPlugin(elem);
            },
            reloadPlugin: function(elem) {
                var nextSibling = elem.nextSibling;
                var parentNode = elem.parentNode;
                parentNode.removeChild(elem);
                var newElem = elem.cloneNode(true);
                this.done.push(newElem);
                if(nextSibling) {
                    parentNode.insertBefore(newElem, nextSibling);
                } else {
                    parentNode.appendChild(newElem);
                }
            },
            init: function() {
                var desc = navigator.mimeTypes['application/x-shockwave-flash'].description.toLowerCase();
                /*if(desc.indexOf('adobe')>-1){
                 delete this.rules["iqiyi_1"];
                 delete this.rules["iqiyi_2"];
                 }*/
                if(document.URL.indexOf('tv.sohu.com')<=0){
                    delete this.rules["sohu"];
                }
                var handler = this.animationsHandler.bind(this);
                document.body.addEventListener('webkitAnimationStart', handler, false);
                document.body.addEventListener('msAnimationStart', handler, false);
                document.body.addEventListener('oAnimationStart', handler, false);
                document.body.addEventListener('animationstart', handler, false);
                this.addAnimations();
            }
        };
        new A().init();
    })();
}
// 20140730
(function cnbeta() {
    if (document.URL.indexOf('cnbeta.com') >= 0) {
        var elms = document.body.querySelectorAll("p>embed");
        Array.prototype.forEach.call(elms, function(elm) {
            elm.style.marginLeft = "0px";
        });
    }
})();
//去百度推广广告
if(document.URL.indexOf('www.baidu.com') >= 0){
    if(document && document.getElementsByTagName && document.getElementById && document.body){
        var a = function(){
            Array.prototype.forEach.call(document.body.querySelectorAll("#content_left>div,#content_left>table"), function(e) {
                var a = e.getAttribute("style");
                if(a && /display:(table|block)\s!important/.test(a)){
                    e.parentNode.removeChild(e)
                }
            });
        };
        a();
        document.getElementById("su").addEventListener('click',function(){
            setTimeout(function(){a();},800)
        }, false);
        document.getElementById("kw").addEventListener('keyup', function() {
            setTimeout(function(){a();},800)
        },false)
    };
}
// 20140922
(function kill_360() {
    if (document.URL.indexOf('so.com') >= 0) {
        document.getElementById("e_idea_pp").style.display = none;
    }
})();
</script><style type="text/css">object,embed{                -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted;                -ms-animation-duration:.001s;-ms-animation-name:playerInserted;                -o-animation-duration:.001s;-o-animation-name:playerInserted;                animation-duration:.001s;animation-name:playerInserted;}                @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}                @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}                @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}                @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}</style></head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://jssdk.demo.qiniu.io/#">七牛云存储 - JavaScript SDK</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
          <ul class="nav navbar-nav">
            <li class="active"><a href="http://jssdk.demo.qiniu.io/#">上传示例</a></li>
            <li><a href="http://developer.qiniu.com/code/v6/sdk/javascript.html">SDK 文档</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container" style="padding-top: 60px;">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="http://jssdk.demo.qiniu.io/#demo" id="demo-tab" role="tab" data-toggle="tab" aria-controls="demo" aria-expanded="true">示例</a>
            </li>
            <li role="presentation">
                <a href="http://jssdk.demo.qiniu.io/#code" id="code-tab" role="tab" data-toggle="tab" aria-controls="code">代码</a>
            </li>
            <li role="presentation">
                <a href="http://jssdk.demo.qiniu.io/#log" id="log-tab" role="tab" data-toggle="tab" aria-controls="log">日志</a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="demo" aria-labelledby="demo-tab">

                <div class="row" style="margin-top: 20px;">
                    <input type="hidden" id="domain" value="http://7xl4c6.com1.z0.glb.clouddn.com/">
                    <input type="hidden" id="uptoken_url" value="uptoken">
                    <ul class="tip col-md-12 text-mute">
                        <li>
                            <small>
                                JavaScript SDK 基于 Plupload 开发，可以通过 Html5 或 Flash 等模式上传文件至七牛云存储。
                            </small>
                        </li>
                        <li>
                            <small>临时上传的空间不定时清空，请勿保存重要文件。</small>
                        </li>
                        <li>
                            <small>Html5模式大于4M文件采用分块上传。</small>
                        </li>
                        <li>
                            <small>上传图片可查看处理效果。</small>
                        </li>
                        <li>
                            <small>本示例限制最大上传文件100M。</small>
                        </li>
                    </ul>
                    <div class="col-md-12">
                        <div id="container" style="position: relative;">
                            <a class="btn btn-default btn-lg " id="pickfiles" href="http://jssdk.demo.qiniu.io/#" style="position: relative; z-index: 1;">
                                <i class="glyphicon glyphicon-plus"></i>
                                <span>选择文件</span>
                            </a>
                        <div id="html5_1aj3rtennnga1n5h927gjn8343_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 171px; height: 46px; overflow: hidden; z-index: 0;"><input id="html5_1aj3rtennnga1n5h927gjn8343" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept=""></div></div>
                    </div>
                    <div style="display:none" id="success" class="col-md-12">
                        <div class="alert-success">
                            队列全部文件处理完毕
                        </div>
                    </div>
                    <div class="col-md-12 ">
                        <table class="table table-striped table-hover text-left" style="margin-top:40px;display:none">
                            <thead>
                              <tr>
                                <th class="col-md-4">Filename</th>
                                <th class="col-md-2">Size</th>
                                <th class="col-md-6">Detail</th>
                              </tr>
                            </thead>
                            <tbody id="fsUploadProgress">
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <div role="tabpanel" class="tab-pane fade" id="code" aria-labelledby="code-tab">

                <div class="row" style="margin-top: 20px;">
                    <div class="col-md-12">
                        <pre><code class="javascript">
                        <span class="comment">//引入Plupload 、qiniu.js后</span>
                        <span class="keyword">var</span> uploader = Qiniu.uploader({
                            runtimes: <span class="string">'html5,flash,html4'</span>,    <span class="comment">//上传模式,依次退化</span>
                            browse_button: <span class="string">'pickfiles'</span>,       <span class="comment">//上传选择的点选按钮，**必需**</span>
                            uptoken_url: <span class="string">'/token'</span>,            <span class="comment">//Ajax请求upToken的Url，**强烈建议设置**（服务端提供）</span>
                            <span class="comment">// uptoken : '<your upload="" token="">', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成</your></span><your upload="" token="">
                            <span class="comment">// unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。</span>
                            <span class="comment">// save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理</span>
                            domain: <span class="string">'http://qiniu-plupload.qiniudn.com/'</span>,   <span class="comment">//bucket 域名，下载资源时用到，**必需**</span>
                            get_new_uptoken: <span class="literal">false</span>,  <span class="comment">//设置上传文件的时候是否每次都重新获取新的token</span>
                            container: <span class="string">'container'</span>,           <span class="comment">//上传区域DOM ID，默认是browser_button的父元素，</span>
                            max_file_size: <span class="string">'100mb'</span>,           <span class="comment">//最大文件体积限制</span>
                            flash_swf_url: <span class="string">'js/plupload/Moxie.swf'</span>,  <span class="comment">//引入flash,相对路径</span>
                            max_retries: <span class="number">3</span>,                   <span class="comment">//上传失败最大重试次数</span>
                            dragdrop: <span class="literal">true</span>,                   <span class="comment">//开启可拖曳上传</span>
                            drop_element: <span class="string">'container'</span>,        <span class="comment">//拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传</span>
                            chunk_size: <span class="string">'4mb'</span>,                <span class="comment">//分块上传时，每片的体积</span>
                            auto_start: <span class="literal">true</span>,                 <span class="comment">//选择文件后自动上传，若关闭需要自己绑定事件触发上传</span>
                            init: {
                                <span class="string">'FilesAdded'</span>: <span class="keyword">function</span>(up, files) {
                                    plupload.each(files, <span class="keyword">function</span>(file) {
                                        <span class="comment">// 文件添加进队列后,处理相关的事情</span>
                                    });
                                },
                                <span class="string">'BeforeUpload'</span>: <span class="keyword">function</span>(up, file) {
                                       <span class="comment">// 每个文件上传前,处理相关的事情</span>
                                },
                                <span class="string">'UploadProgress'</span>: <span class="keyword">function</span>(up, file) {
                                       <span class="comment">// 每个文件上传时,处理相关的事情</span>
                                },
                                <span class="string">'FileUploaded'</span>: <span class="keyword">function</span>(up, file, info) {
                                       <span class="comment">// 每个文件上传成功后,处理相关的事情</span>
                                       <span class="comment">// 其中 info 是文件上传成功后，服务端返回的json，形式如</span>
                                       <span class="comment">// {</span>
                                       <span class="comment">//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",</span>
                                       <span class="comment">//    "key": "gogopher.jpg"</span>
                                       <span class="comment">//  }</span>
                                       <span class="comment">// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html</span>

                                       <span class="comment">// var domain = up.getOption('domain');</span>
                                       <span class="comment">// var res = parseJSON(info);</span>
                                       <span class="comment">// var sourceLink = domain + res.key; 获取上传成功后的文件的Url</span>
                                },
                                <span class="string">'Error'</span>: <span class="keyword">function</span>(up, err, errTip) {
                                       <span class="comment">//上传出错时,处理相关的事情</span>
                                },
                                <span class="string">'UploadComplete'</span>: <span class="keyword">function</span>() {
                                       <span class="comment">//队列文件处理完毕后,处理相关的事情</span>
                                },
                                <span class="string">'Key'</span>: <span class="keyword">function</span>(up, file) {
                                    <span class="comment">// 若想在前端对每个文件的key进行个性化处理，可以配置该函数</span>
                                    <span class="comment">// 该配置必须要在 unique_names: false , save_key: false 时才生效</span>

                                    <span class="keyword">var</span> key = <span class="string">""</span>;
                                    <span class="comment">// do something with key here</span>
                                    <span class="keyword">return</span> key
                                }
                            }
                        });

                        <span class="comment">// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置-&gt;基本设置-&gt;域名设置"查看获取</span>

                        <span class="comment">// uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs</span>
                        </your></code></pre>
                    </div>
                </div>

            </div>
            <div role="tabpanel" class="tab-pane fade" id="log" aria-labelledby="log-tab">
                <pre id="qiniu-js-sdk-log"><p>[qiniu-js-sdk][debug] init uploader start</p><p>[qiniu-js-sdk][debug] environment:  {"browser":"Chrome","version":50,"os":"Mac OS X","osVersion":"10.10.5","swf_url":"../flash/Moxie.swf","xap_url":"../silverlight/Moxie.xap","global_event_dispatcher":"moxie.core.EventTarget.instance.dispatchEvent","OS":"Mac OS X"}</p><p>[qiniu-js-sdk][debug] userAgent:  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36</p><p>[qiniu-js-sdk][debug] invoke reset_chunk_size()</p><p>[qiniu-js-sdk][debug] op.chunk_size:  4mb</p><p>[qiniu-js-sdk][debug] option:  {"runtimes":"html5,flash,html4","browse_button":"pickfiles","container":"container","drop_element":"container","max_file_size":"1000mb","flash_swf_url":"bower_components/plupload/js/Moxie.swf","dragdrop":true,"chunk_size":"4mb","multi_selection":true,"uptoken_url":"uptoken","domain":"http://7xocov.com2.z0.glb.qiniucdn.com/","get_new_uptoken":false,"auto_start":true,"log_level":5,"init":{},"url":"http://upload.qiniu.com","multipart_params":{"token":""}}</p><p>[qiniu-js-sdk][debug] new plupload.Uploader(option)</p><p>[qiniu-js-sdk][debug] bind Init event</p><p>[qiniu-js-sdk][debug] bind FilesAdded event</p><p>[qiniu-js-sdk][debug] bind BeforeUpload event</p><p>[qiniu-js-sdk][debug] bind UploadProgress event</p><p>[qiniu-js-sdk][debug] bind ChunkUploaded event</p><p>[qiniu-js-sdk][debug] bind Error event</p><p>[qiniu-js-sdk][debug] bind FileUploaded event</p><p>[qiniu-js-sdk][debug] invoke uploader.init()</p><p>[qiniu-js-sdk][debug] init uploader end</p><p>[qiniu-js-sdk][debug] Init event activated</p><p>[qiniu-js-sdk][debug] get uptoken from:  uptoken</p><p>[qiniu-js-sdk][debug] get new uptoken:  JOiPUijNB0t8vbNKIufpn5gDKmg0G-uFHBlrQoV2:fAZ9PIhVnJ4hLNvGRQClLf9Bppg=:eyJzY29wZSI6Impzc2RrIiwiZGVhZGxpbmUiOjE0NjM2NDM2NDZ9</p></pre>
            </div>
        </div>
    </div>

    <div class="container" style="display: none;">

        <div class="text-left col-md-12 wrapper">
            <h1 class="text-left col-md-12 ">
                七牛云存储 - JavaScript SDK
                <a class="btn btn-default view_code" id="show_code">
                    查看初始化代码
                </a>
                <a class="btn btn-default view_github" href="https://github.com/qiniupd/qiniu-js-sdk" target="_blank">
                    <img src="./GitHub-Mark-32px.png">
                    View Source on Github
                </a>
            </h1>
        </div>
        <div class="body">
    <!-- <div class="col-md-12" id="qiniu-js-sdk-log"></div> -->
        </div>
        <div class="modal fade body" id="myModal-code" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">查看初始化代码</h4>
              </div>
              <div class="modal-body">
                <pre><code class="javascript">
                <span class="comment">//引入Plupload 、qiniu.js后</span>
                <span class="keyword">var</span> uploader = Qiniu.uploader({
                    runtimes: <span class="string">'html5,flash,html4'</span>,    <span class="comment">//上传模式,依次退化</span>
                    browse_button: <span class="string">'pickfiles'</span>,       <span class="comment">//上传选择的点选按钮，**必需**</span>
                    uptoken_url: <span class="string">'/token'</span>,            <span class="comment">//Ajax请求upToken的Url，**强烈建议设置**（服务端提供）</span>
                    <span class="comment">// uptoken : '<your upload="" token="">', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成</your></span><your upload="" token="">
                    <span class="comment">// unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。</span>
                    <span class="comment">// save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理</span>
                    domain: <span class="string">'http://qiniu-plupload.qiniudn.com/'</span>,   <span class="comment">//bucket 域名，下载资源时用到，**必需**</span>
                    get_new_uptoken: <span class="literal">false</span>,  <span class="comment">//设置上传文件的时候是否每次都重新获取新的token</span>
                    container: <span class="string">'container'</span>,           <span class="comment">//上传区域DOM ID，默认是browser_button的父元素，</span>
                    max_file_size: <span class="string">'100mb'</span>,           <span class="comment">//最大文件体积限制</span>
                    flash_swf_url: <span class="string">'js/plupload/Moxie.swf'</span>,  <span class="comment">//引入flash,相对路径</span>
                    max_retries: <span class="number">3</span>,                   <span class="comment">//上传失败最大重试次数</span>
                    dragdrop: <span class="literal">true</span>,                   <span class="comment">//开启可拖曳上传</span>
                    drop_element: <span class="string">'container'</span>,        <span class="comment">//拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传</span>
                    chunk_size: <span class="string">'4mb'</span>,                <span class="comment">//分块上传时，每片的体积</span>
                    auto_start: <span class="literal">true</span>,                 <span class="comment">//选择文件后自动上传，若关闭需要自己绑定事件触发上传</span>
                    init: {
                        <span class="string">'FilesAdded'</span>: <span class="keyword">function</span>(up, files) {
                            plupload.each(files, <span class="keyword">function</span>(file) {
                                <span class="comment">// 文件添加进队列后,处理相关的事情</span>
                            });
                        },
                        <span class="string">'BeforeUpload'</span>: <span class="keyword">function</span>(up, file) {
                               <span class="comment">// 每个文件上传前,处理相关的事情</span>
                        },
                        <span class="string">'UploadProgress'</span>: <span class="keyword">function</span>(up, file) {
                               <span class="comment">// 每个文件上传时,处理相关的事情</span>
                        },
                        <span class="string">'FileUploaded'</span>: <span class="keyword">function</span>(up, file, info) {
                               <span class="comment">// 每个文件上传成功后,处理相关的事情</span>
                               <span class="comment">// 其中 info 是文件上传成功后，服务端返回的json，形式如</span>
                               <span class="comment">// {</span>
                               <span class="comment">//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",</span>
                               <span class="comment">//    "key": "gogopher.jpg"</span>
                               <span class="comment">//  }</span>
                               <span class="comment">// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html</span>

                               <span class="comment">// var domain = up.getOption('domain');</span>
                               <span class="comment">// var res = parseJSON(info);</span>
                               <span class="comment">// var sourceLink = domain + res.key; 获取上传成功后的文件的Url</span>
                        },
                        <span class="string">'Error'</span>: <span class="keyword">function</span>(up, err, errTip) {
                               <span class="comment">//上传出错时,处理相关的事情</span>
                        },
                        <span class="string">'UploadComplete'</span>: <span class="keyword">function</span>() {
                               <span class="comment">//队列文件处理完毕后,处理相关的事情</span>
                        },
                        <span class="string">'Key'</span>: <span class="keyword">function</span>(up, file) {
                            <span class="comment">// 若想在前端对每个文件的key进行个性化处理，可以配置该函数</span>
                            <span class="comment">// 该配置必须要在 unique_names: false , save_key: false 时才生效</span>

                            <span class="keyword">var</span> key = <span class="string">""</span>;
                            <span class="comment">// do something with key here</span>
                            <span class="keyword">return</span> key
                        }
                    }
                });

                <span class="comment">// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置-&gt;基本设置-&gt;域名设置"查看获取</span>

                <span class="comment">// uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs</span>
                </your></code></pre>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal fade body" id="myModal-img" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">图片效果查看</h4>
              </div>
              <div class="modal-body">
                <div class="modal-body-wrapper text-center">
                    <a href="http://jssdk.demo.qiniu.io/" target="_blank">
                        <img src="http://jssdk.demo.qiniu.io/" alt="" data-key="" data-h="">
                    </a>
                </div>
                <div class="modal-body-footer">
                    <div class="watermark">
                        <span>水印控制：</span>
                        <a href="http://jssdk.demo.qiniu.io/#" data-watermark="NorthWest" class="btn btn-default">
                            左上角
                        </a>
                        <a href="http://jssdk.demo.qiniu.io/#" data-watermark="SouthWest" class="btn btn-default">
                            左下角
                        </a>
                        <a href="http://jssdk.demo.qiniu.io/#" data-watermark="NorthEast" class="btn btn-default">
                            右上角
                        </a>
                        <a href="http://jssdk.demo.qiniu.io/#" data-watermark="SouthEast" class="btn btn-default disabled">
                            右下角
                        </a>
                        <a href="http://jssdk.demo.qiniu.io/#" data-watermark="false" class="btn btn-default">
                            无水印
                        </a>
                    </div>
                     <div class="imageView2">
                        <span>缩略控制：</span>
                        <a href="http://jssdk.demo.qiniu.io/#" data-imageview="large" class="btn btn-default disabled">
                            大缩略图
                        </a>
                        <a href="http://jssdk.demo.qiniu.io/#" data-imageview="middle" class="btn btn-default">
                            中缩略图
                        </a>
                        <a href="http://jssdk.demo.qiniu.io/#" data-imageview="small" class="btn btn-default">
                            小缩略图
                        </a>
                    </div>
                    <div class="imageMogr2">
                        <span>高级控制：</span>
                        <a href="http://jssdk.demo.qiniu.io/#" data-imagemogr="left" class="btn btn-default no-disable-click">
                            逆时针
                        </a>
                        <a href="http://jssdk.demo.qiniu.io/#" data-imagemogr="right" class="btn btn-default no-disable-click">
                            顺时针
                        </a>
                        <a href="http://jssdk.demo.qiniu.io/#" data-imagemogr="no-rotate" class="btn btn-default">
                            无旋转
                        </a>
                    </div>
                    <div class="text-warning">
                        备注：小图片水印效果不明显，建议使用大图片预览水印效果
                    </div>
                </div>
              </div>
              <div class="modal-footer">
                <span class="pull-left">本示例仅演示了简单的图片处理效果，了解更多请点击</span>

                <a href="https://github.com/SunLn/qiniu-js-sdk" target="_blank" class="pull-left">本SDK文档</a>
                <span class="pull-left">或</span>

                <a href="http://developer.qiniu.com/docs/v6/api/reference/fop/image/" target="_blank" class="pull-left">七牛官方文档</a>

                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
        </div>
    </div>




<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap.min.js"></script>
<script type="text/javascript" src="./moxie.js"></script>
<script type="text/javascript" src="./plupload.dev.js"></script>
<!-- <script type="text/javascript" src="bower_components/plupload/js/plupload.full.min.js"></script> -->
<script type="text/javascript" src="./zh_CN.js"></script>
<script type="text/javascript" src="./ui.js"></script>
<script type="text/javascript" src="./qiniu.js"></script>
<script type="text/javascript" src="./highlight.js"></script>
<script type="text/javascript" src="./main.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>


</body></html>